<template>
  <div>
    <h5>1.获取图书信息</h5>
    <button @click="getList">获取</button>
    <hr />
    <h5>2.获取某本书籍</h5>
    <input type="text" placeholder="请输入查询的书籍" v-model="bookname" />
    <button @click="getFn">获取</button>
    <hr />
    <h5>3.发布书籍</h5>
    <input type="text" placeholder="请输入名称" v-model="objbook.bookname" />
    <input type="text" placeholder="请输入作者" v-model="objbook.author" />
    <input type="text" placeholder="请输入出版社" v-model="objbook.publisher" />
    <button @click="release">发布</button>
  </div>
</template>
  <script>
import axios from 'axios'
// 目标1：拿到所有图书信息
// 1.下载axios包（命令 npm i axios）
// 2.import 引入 axios方法
// 3.点击事件中，使用 axios（）方法传入请求的配置对象，.then接收成功结果

// 目标2：获取某本书籍
// 1.静态页面搞好，input要绑定v-model双向绑定绑定的值，底下声明
// 2.点击事件，使用 axios（）方法传入请求的配置对象，.then接收成功结果

// axios方法，方法时一个特殊的对（js语言万物皆对象）
// 设置全局默认的基地址，
// 作用，以后再使用这个axios方法发起请求，会在每个url的前面自动拼接这个前缀基地址
axios.defaults.baseURL = 'http://123.57.109.30:3006'
export default {
  data () {
    return {
      bookname: '',
      objbook: {
        bookname: '',
        author: "",
        publisher: ''
      }
    }
  },
  methods: {
    // 获取图书信息
    getList () {
      // axios()方法在原地留下一个promise对象（里面包含着一个原生异步的ajax请）
      axios({
        url: '/api/getbooks',
        method: 'get'
      }).then(res => {
        console.log(res)
      })
    },
    // 获取某本书籍
    getFn () {
      axios({
        url: '/api/getbooks',
        method: 'get',//默认不写GET
        params: {//params里参数和值会拼接到url？后面带给后台
          bookname: this.bookname
        }
      }).then(res => {
        console.log(res)
      })
    },
    // 发布图书
    release () {
      axios({
        url: '/api/addbook',
        method: 'post',
        data: {
          // bookname: this.objbook.bookname,
          // author: this.objbook.author,
          // publisher: this.objbook.publisher,
          // appkey: '7250d3eb-18e1-41bc-8bb2-11483665535a'
          ...this.objbook,//展开运算符
          appkey: '7250d3eb-18e1-41bc-8bb2-11483665535a'
        }
      }).then(res => {
        console.log(res)
      })
    }
  }
}
  </script>
